<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>表格排序插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css"></style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		hy.tablesort("#exp1");
		hy.tablesort("#exp2", {
			attr: "attr",
			sorts: {
				id: {
					"index": 0, 
					"type": "int" // 指定数据类型 int|float|bool|date|string
				},
				name: {          
					"index": 1,
					"type": "string"
				},
				date: { 
					"index": 2,
					"type": "date"
				}
			}
		});

	});
	
	</script>
</head>
<body>
	<div class="main-wrapper">
		<h3>HY-UI Demos</h3>

		<div class="theme">表格排序插件演示用例。</div> <strong>1.</strong>
		前置条件
		<p>需要进行排序的表格必须引用<em>.sortable</em>这个样式：</p>
		<pre><code class="javascript">&lt;table class="ui sortable table segment"&gt;&lt;/table&gt;</code></pre>
		<strong>2.</strong>
		简单示例 <em>hy.tablesort(table);</em>
		<pre><code class="javascript">hy.tablesort(".ui.table");</code></pre>
		<table id="exp1" class="ui sortable table segment">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>A01</td>
					<td>张三</td>
					<td>22</td>
					<td>2012-12-12</td>
				</tr>
				<tr>
					<td>A02</td>
					<td>李四</td>
					<td>32</td>
					<td>2013-04-16</td>
				</tr>
				<tr>
					<td>A03</td>
					<td>王五</td>
					<td>31</td>
					<td>2012-05-11</td>
				</tr>
				<tr>
					<td>B01</td>
					<td>赵二</td>
					<td>233</td>
					<td>2012-01-11</td>
				</tr>
			</tbody>

		</table>
		
		<strong>3.</strong> 默认配置
		<pre><code class="javascript">tablesort.defaults = {
	"asc": 'sorted ascending', // 升序排序样式
	"desc": 'sorted descending', // 降序排序样式
	"attr": "order" // 排序表头属性名称
}
</code></pre>
		<strong>4.</strong> 详细配置解析
		<p>在多级表头时需要指定一个属性来表示该表头单击时进行排序</p>
		<pre><code class="javascript">// 其中attt就是指定的排序属性
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th rowspan="2" attr="id"&gt;
            编号
        &lt;/th&gt;
        &lt;th colspan="2"&gt;
            入职信息
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th attr="name"&gt;
            姓名
        &lt;/th&gt;
        &lt;th attr="date"&gt;
            日期
        &lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
		</code></pre>
		<p>其中表头配置的<em>attr</em>可以自由指定，然后在使用排序插件时指定<em>hy.tablesort(table,"你来决定")</em>或<em>{ attr:"你来决定",...}</em></p>
		<pre><code class="javascript">hy.tablesort(".ui.table"."attr");</code></pre>
		<p>自由配置</p>
		<pre><code class="javascript">hy.tablesort(".ui.table", {
    attr: "attr",
    sorts: {
        id: {
            "index": 0,   // 指定索引位置
            "type": "int", // 指定数据类型 int|float|bool|date|string
            "value": function(td) {return $(td).html();} // 自定义取值函数，传入对象 td 为单元格
        },
        name: {           // 若直接定义 【name: 2】" 则表示指定name的index属性为2
            "index": 1,
            "type": "string"
        },
        date: {           // 若直接定义 【date: "date"】 则表示指定date的type属性为"date"
            "index": 2,
            "type": "date"
        }
    }
}); // 注：索引从0开始，对应tbody中每一行里的单元格
</code></pre>
		<table id="exp2" class="ui inverted purple celled sortable table segment">
			<thead>
				<tr>
					<th rowspan="2" attr="id">编号</th>
					<th colspan="2">入职信息</th>
				</tr>
				<tr>
					<th attr="name">姓名</th>
					<th attr="date">日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>101</td>
					<td>Jim</td>
					<td>2012-12-12</td>
				</tr>
				<tr>
					<td>201</td>
					<td>Tom</td>
					<td>2012-04-17</td>
				</tr>
				<tr>
					<td>301</td>
					<td>Michell</td>
					<td>2013-11-22</td>
				</tr>
			</tbody>
		</table>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>

	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>